<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>全国少儿世界和平海报大赛</title>
<!-- <link href="css/maint.css" type="text/css" rel="stylesheet" /> -->
<css href="/Public/css/maint.css" />
<css href="/Public/css/font.css" />
<!-- <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> -->
<js  href="/Public/js/jquery-1.7.1.min.js" />
<!--<script src="/Public/js/banner.js" type="text/javascript"></script>-->
<!--<script type="text/javascript" src="js/jquery.masonry.min.js"></script> -->
<js  href="/Public/js/jquery.masonry.min.js" />
<!--<script type="text/javascript" src="js/main.js"></script> -->
<js  href="/Public/js/common.js" />
<script type="text/javascript">
var h5_adapter = ( function(){
	var _poll = undefined;	
	var _next = 1;
	var _limit = 5;
	var _source = undefined;
	var _render = undefined;
	return {
		query: function( source, render ){
			source && ( _source = source );
			render && ( _render = render );
			$.get( _source, { page: _next, limit: _limit }, function( result ){
				// alert( JSON.stringify(result) );
				if( result.size ){
					_next = parseInt( result.next );
				}
				_render( result );
			});
		}
	}
})();
$(function() {
	/*瀑布流开始*/
	var container = $('#ulWaterfall');
	var loading = $('#imloading');
	var reloading = 0;
	// 初始化loading状态
	loading.data("on", true);				
	/*模拟从后台获取到的数据*/
	//var sqlJson	=	common.show.fetchJson();
	var load = function( sqlJson, top, left ) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			for (var i in sqlJson.datas) {
				<!--TODO: use thinkphp 安全链接 -->
				html +="<li class='item'><a href='/?m=wap&c=praise&a=h5_fetch_one&praise={$praise}&type={$type}&id="+sqlJson.datas[i].id+"'>"+"<img class='pic' src='#' data-href='" + sqlJson.datas[i].pic + "'></a>";
				html +="<div class='divNum'></div>";
				html +="<span class='spanHeart'><span class='icon iconfont icon-aixin2'></span>"+sqlJson.datas[i].votes+"</span>";
				html +="<span class='spanNum'>"+"编号："+sqlJson.datas[i].id+"</span>";
				html +="<div class='workName'>"+sqlJson.datas[i].show_name+"</div>";
				
				html +="<div class='authorName'>"+"制作部门："+sqlJson.datas[i].author_name+"</div>";
				if( sqlJson.datas[i].teacher_name.length > 0 ) {
					html += "<div class='teacher'>" + "指导老师：" + sqlJson.datas[i].teacher_name + "</div>";
				}
				// if( sqlJson.datas[i].support_team && sqlJson.datas[i].support_team.length ) {
					html += "<div class='fwd'>" + "制作人员：" + sqlJson.datas[i].support_team + "</div>";
				// }
				html +="<div class='divPraise'><a href='/?m=wap&c=praise&a=h5_fetch_one&praise={$praise}&type={$type}&id="+sqlJson.datas[i].id+"'><div class='like'>给TA点赞</div></a></div></li>";
			}
			/*模拟ajax请求数据时延时800毫秒*/
			var time = setTimeout(function() {
				var style = { opacity: 1 };
				top && ( style.top = "0px" );
				left && ( style.left = "0px" );
				/*if( reloading == 1 ){
					console.log( reloading );
					style.top = "0px";
					style.left = "0px";
					reloading = 0;
				}*/
				var newElems = $(html).css( {opacity: 0} ).appendTo(container);

				newElems.find( "img.pic" ).each( function(){
					setTimeout( 100, $(this).attr("src", $(this).data('href') ) );
				} );
				newElems.imagesLoaded(function() {
					newElems.animate( style, 10 );
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	var search = function( options ){
		$.ajax({
			url: "/?m=wap&c=praiseItem&a=search",
			data: options,
			type: "POST",
			success: function( result ){
				// alert( JSON.stringify(result) );
				$("#ulWaterfall").html("");
				$(window).trigger( "scrollTop" );
				load( result, 1, 1 );
			},
			error: function(){
			}
		});
	};

	/*$(".searchBtn").keyup( function(event){
		switch( event.keyCode )
		{
			case 13: search( {praise: "{$praise}", keyword: $(this).val() } ); break;
			default: break;
		}
	});*/

	$(".searchBtn").unbind( "click").bind( "click", function(){
		search( {praise: "{$praise}", keyword: $('#searchKeyword').val() } );
	});

	$(".searchDel").unbind( "click").bind( "click", function(){
		//reloading = 1;
		//$("#ulWaterfall").html("");
		//common.show.fetchJson( { praise: "{$praise}", page: 1 }, load );
		$("#searchKeyword").val("");
	});

	// setTimeout( function(){ 
		// common.show.fetchJson( { praise: "{$praise}"}, load );
		h5_adapter.query( "/?m=wap&c=praiseItem&a=h5_fetch&praise={$praise}&type={$type}", load )
	// }, 2000 );

	$(window).scroll(function() { 
		if (!loading.data("on")) return;
		var itemNum = $('#waterfull').find('.item').length;
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop()) {
			//加载更多数据
			loading.data("on", false).fadeIn();
			setTimeout( function(){ 
				// common.show.fetchJson( { priase: "{$praise}" }, load );
				h5_adapter.query();
			}, 800 );
		}
	});
});

</script>
</head>	
<body style="background-color:#f2f2f2;" class="bot50">
<div id="wrapper">
	<div id="main">
		<div class="activeTitles">
		<ul class="ulactTitle"> <!--TODO: not good, cause html rendering uneffective, should use real tab-->
	            <li class="on"><a href="/?m=wap&c=praise&a=h5_index&praise={$praise}&type={$type}" target="_self"><span>作品人气榜</span></a></li>
	            <!-- <li><a href="/?m=wap&c=praise&a=teacher&praise={$praise}" target="_self"><span class="bor0">人气指导老师</span></a></li> -->
	        </ul>
	    </div>
	    <!-- <div class="searchBox"> -->
	        <!-- <div class="search"> -->
	            <!--<span class="icon iconfont icon-sousuo"></span>
	            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索" id="searchBtn"/> -->

				<!-- <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索" id="searchKeyword"/> -->
				<!-- <span class="icon iconfont searchDel"></span> -->
	        <!-- </div> <input type="button" class="searchBtn" value=""> -->
		<!-- </div> -->
		<div class="content">
			<div class="waterFallBox" id="waterfull">
				<ul id="ulWaterfall">
				</ul>
			</div>
			<div id="imloading" class="loading">加载中</div>
			<div class="divfooter">
        	<p>浙报新媒体技术支持</p>
            <p class="pFooter">浙江日报新闻发展有限公司 | Copyright  2014 - 2015</p>
        </div>
		</div>
	</div>
</div>
<include file="Tpl/h5_footer" praise="{$praise}"/>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
            timestamp: "{$timestamp}", // 必填，生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
            signature: '{$wxSha1}',// 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function(res){
            console.log(res);
    		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        wx.ready( function( e ){
        	wx.onMenuShareAppMessage({
			    title: "{$share['desc']}", // 分享标题
			    desc: "{$share['title']}", // 分享描述
			    link: "{$share['link']}", // 分享链接
			    imgUrl: "{$share['imgUrl']}", // 分享图标
			    type: 'link', // 分享类型,music、video或link，不填默认为link
			    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			wx.onMenuShareTimeline({
			    title: "{$share['desc']}", // 分享标题
			    link: "{$share['link']}", // 分享链接
			    imgUrl: "{$share['imgUrl']}", // 分享图标
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
        })
    </script>
</body>
</html>
